<template>
    <div class="demoLogin">
        <div class="loginDiv">
            <div style="display:flex;height:54px;line-height:54px;align-items:center;margin-bottom:10px">
                <img style="display:inline-block" src="../../assets/imgs/logo.png" />
                 <span style="display:inline-block;width:20px;height:38px;border-right:1px solid white"></span>
                 <span style="display:inline-block;color:white;height:38px;line-height:38px;margin-left:20px;font-size:18px">系统名称</span>
            </div>
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
                <p class="l-title">用户登录</p>
    
                <el-form-item prop="username" class="l-formItem">
                    <el-input v-model.trim="loginForm.username" auto-complete="off" maxlength="20" class="l-input" clearable placeholder="请输入账号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" class="l-formItem">
                    <el-input v-model.trim="loginForm.password" type="password" maxlength="20" class="l-input" auto-complete="off" clearable placeholder="请输入密码"></el-input>
                </el-form-item>
                <div class="l-formItem">
                    <el-form-item prop="authCode" class="fLoginCodeItem">
                        <el-input v-model="loginForm.authCode" maxlength="20" class="l-input" style="padding-right:110px;" auto-complete="off" placeholder="请输入验证码">
                        </el-input>
                    </el-form-item>
                    <el-image :src="yz" @click="reloading" class="l-image" style="height:40px;margin-rignt:15px"/>
                </div>
                <el-form-item class="l-formItem">
                    <el-button @click.native.prevent="handleSubmit" class="loginBtn" :loading="logining">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="happ-cover1"></div>
    </div>
</template>
<script>
import { RandsReg } from '@/utils/utils';
let rands = null;
let timerTen = null;
export default {
    data() {
        return {
            yz: '',
            codes: null,
            logining: false,
            loginForm: {
                username: '',
                password: '',
                authCode: ''
            },
            // 输入校验
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                authCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            lchecked: false,
            
        };
    },
    methods: {
        //获取浏览器
        getExplorer() {
            var explorer = window.navigator.userAgent,
                compare = function (s) {
                    return explorer.indexOf(s) >= 0;
                },
                ie11 = (function () {
                    return 'ActiveXObject' in window;
                })();
            if (compare('MSIE') || ie11) {
                return 'ie';
            } else if (compare('Firefox') && !ie11) {
                return 'Firefox';
            } else if (compare('Chrome') && !ie11) {
                if (explorer.indexOf('Edge') > -1) {
                    return 'Edge';
                } else {
                    return 'Chrome';
                }
            } else if (compare('Opera') && !ie11) {
                return 'Opera';
            } else if (compare('Safari') && !ie11) {
                return 'Safari';
            }
        },
        // 登录
        handleSubmit() {
            let _self = this;
            _self.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    //登录接口
                    if (_self.loginForm.authCode.toLocaleUpperCase() === _self.codes.substring(-1, _self.loginForm.authCode.length).toLocaleUpperCase() && _self.loginForm.authCode.length === _self.codes.length) {
                    } else {
                        _self.$message.error('验证码不正确');
                        _self.reloading();
                        _self.loginForm.authCode = '';
                        return;
                    }
                    // _self._http({
                    //     url: '/v1/web/login',
                    //     type: 'post',
                    //     isLoading: true,
                    //     loadingTxt: '登录中，请稍后',
                    //     isBody: true,
                    //     data: { action:{..._self.loginForm, browser: _self.getExplorer() }},
                    //     success: function (loginRes) {
                    //        _self.$router.push('/index')

                    //         if(loginRes.data){
                    //             _self._storage.LStorage.set('orgId', loginRes.data.orgId);
                    //             _self._storage.LStorage.set('token', loginRes.data.token);
                    //             _self._storage.LStorage.set('userId', loginRes.data.id);
                    //             _self._storage.LStorage.set('userName', loginRes.data.realName);
                    //             _self._storage.LStorage.set('userPhone', loginRes.data.phone);
                    //         }
                    //     },
                    //     success_false: function (err) {
                    //         _self.reloading();
                    //     }
                    // });
                } else {
                    return false;
                }
            });
        },
        reloading() {
            rands.reload((res) => {
                this.yz = res;
                this.codes = rands.regRangs();
            });
        },
        resetCode(){
            timerTen = setInterval(()=>{
                this.reloading();
            },600000)
        }
    },
    created() {
        rands = new RandsReg({ num: 4 });
        this.reloading();
    },
    mounted() {
        this.resetCode();
    },
    computed: {},
    beforeRouteLeave(to, form, next){
        clearInterval(timerTen);
        next();
    }
};
</script>
<style lang="scss">
.demoLogin {
    background-image: url(../../assets/imgs/img_loginback.png);
    background-size: cover;
    .loginDiv{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        .login-container{
            width: 413px;
            padding: 46px 16px 46px 16px;
            background-color: white;
            border-radius: 6px;
            text-align: center;

            .l-title{
                height: 42px;
                margin-bottom: 6px;
                text-align: left;
                font-size: 22px;
                font-weight: bold;
                color: #333333;
                line-height: 35px;
                -webkit-background-clip: text;
                        background-clip: text;
            }

            .loginBtn{
                width: 100%;
                border-radius:6px;
                background-color:#2563EB;
                color:white;
                font-size:16px;
                padding: 14px 0px;
            }

            .l-input{
                width: 382px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
                font-size: 14px;
                font-weight: 500;
                
            }
            .l-image{
                position: absolute;
                right: 0;
                top: 1px;
                width: 101px;
                height: 50px;
                cursor: pointer;
            }
            .l-formItem{
                position: relative;
                margin-bottom: 28px;
            }
        }
    }
}
</style>
